<template>
	<m-layout2 title="个人资料" gap="24">
		<m-block gap="0 24">
			<view class="f-column-center" style="margin-top: 37rpx;" @click="uploadAvatar">
				<view class="tx_img">
					<m-image  :src="info.userAvatarUrl" types="user"></m-image>
				</view>
				<view class="tx_txt" >点击头像更改</view>
			</view>
			<m-cell title="昵称" :rightText="info.nickName" @click="isShow = true">
				<text v-if="!info.nickName" slot="right" class="nikeName">
					请输入呢称
				</text>
			</m-cell>
			<!-- <picker :end="endDate" mode="date" :value="info.birthday" @change="bindDateChange">
				<m-cell title="生日" :rightText="info.birthday || '未设置'"></m-cell>
			</picker> -->
			<m-cell title="生日" :rightIconShow="false">
				<view slot="right" class="f-ai-center">
					<uni-datetime-picker type="date" :end="endDate" v-model="info.birthday" @change="bindDateChange">{{info.birthday || '未设置'}}</uni-datetime-picker>
					<m-icon size="28" color="#999999" type="icon-qianjin"></m-icon>
				</view>
			</m-cell>
			<picker end="" @change="bindPickerChange" :range="array" range-key="name">
				<m-cell title="性别" :rightText="info.userGender == 1 ? '男': '女'" :rightIconShow="false"></m-cell>
			</picker>
			<m-cell title="注册时间" :rightText="info.createTime" :rightIconShow="false"></m-cell>
		</m-block>
		<m-dialog :isShow="isShow" :showCancel="true" cancelText="不保存" confirmText="保存" @handleCancel="isShow = false"
			@handleConfirm="handleConfirm">
			<view>
				<m-block gap="26 34" radius="20" bgColor="#F6F6F6">
					<input type="text" v-model="name" maxlength="20" style="color: #333333;" placeholder="请输入昵称"
						placeholder-class="from-item-pcs" />
				</m-block>
				<view class="pop_txt">昵称长度不超过20个字符</view>
			</view>
		</m-dialog>
	</m-layout2>
</template>

<script>
	// import { getUserInfo, getToken } from '@/utils/auth.js'
	// import { UploadImageFile } from '@/api/ExcuteUploadFile.js'
	// import { SetAccount, GetUserInfo } from "@/api/userApi.js" // 引入接口
	// import uDatetimePicker from "@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue"
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				info:{},
				isShow: false,
				name: "",
				array: [{
						name: "男"
					},
					{
						name: "女"
					},
				],
				uploadImage: {},
				endDate: "",
			};
		},
		onShow() {
			this.info = {...this.userinfo};
			let date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			this.endDate = year + '-' + month + '-' + day;
			console.log(this.endDate);
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo
			})
		},
		watch:{
			isShow(val){
				if(!val){
					 this.name = '';
				}
			},
		},
		methods: {
			///////////////////////////////////// 初始化 ////////////////////////////////////////
			initData() {

			},
			///////////////////////////////////// 事件监听 ////////////////////////////////////////
			// 日期选择监听
			bindDateChange(e) {
				console.log(e);
				this.info.birthday = e;
				this.submit();
			},
			// 性别选择监听
			bindPickerChange(e) {
				switch (e.detail.value) {
					case 0:
						this.info.userGender = 1;
						break;
					case 1:
						this.info.userGender = 2;
						break;
					default:
						break;
				}
				this.submit();
			},
			///////////////////////////////////// 点击事件 ////////////////////////////////////////
			// 修改头像
			uploadAvatar(type) {
				let that = this;
				if (!getToken()) {
					return;
				}
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: type == 1 ? ['camera'] : ['album'], //从相册选择
					success: async function({ tempFilePaths, tempFiles }) {
						uni.showLoading();
						tempFiles[0].FileName = tempFiles[0]['name'];
						console.log(tempFiles)
						const {data,success} = await UploadImageFile(tempFilePaths[0], tempFiles);
						if (success) {
							let imgData = res.data;
							console.log(imgData);
							that.info.userAvatarUrl = data;
							that.submit();
						}
						uni.hideLoading()
					}
				});
			},
			// 昵称保存
			handleConfirm() {
				this.isShow = false;
				this.info.nickName = this.name;
				this.submit();
			},
			///////////////////////////////////// 网络请求 ////////////////////////////////////////
			async submit() {
				let data = {
					userID: this.info.userID,
					nickName: this.info.nickName,
					userGender: this.info.userGender,
					birthday: this.info.birthday
				}
				if (JSON.stringify(this.uploadImage) !== "{}") {
					data.userAvatar = this.info.userAvatar;
					data.uploadImage = this.uploadImage;
				}
				console.log(data);
				const success = await SetAccount(data);
				let res = await GetUserInfo();
				if (res.excuteResult === 0) {
					this.info = res.data;
					console.log(this.info);
				}
			}
		}
	}
</script>

<style lang="scss">
	.nikeName {
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #C5C5C5;
		margin-right: 20rpx;
	}

	.tx_img {
		width: 130rpx;
		height: 130rpx;
		margin-right: 19rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background-color: #fff;
			border: 5rpx solid #fff;
		}
	}

	.tx_txt {
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FA2B47;
		margin-top: 15rpx;
	}

	.tx_info {
		view:nth-of-type(1) {
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #222222;
		}

		view:nth-of-type(2) {
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			padding-top: 5rpx;
		}
	}

	.pop_txt {
		color: #999999;
		margin: 20rpx 0 0 29rpx;
	}
</style>
